<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <!-- Bootstrap -->
    <link href="<?=base_url();?>/public/resource/default/vendor/bootstrap/css/bootstrap.css" rel="stylesheet">

    <link rel="stylesheet" href="http://apps.bdimg.com/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" />
    <link rel="stylesheet" href="<?=base_url();?>/public/resource/default/vendor/plupload/js/jquery.ui.plupload/css/jquery.ui.plupload.css" type="text/css" />

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <link href="<?=base_url();?>/public/resource/default/css/style.css" rel="stylesheet" >

</head>
<body>

<div class="container-fluid wp-content">

    <div class="wp-content-mbx">
        <a><span class="glyphicon glyphicon-camera" aria-hidden="true"></span></a>
        <div>
            <span class="mainhead">媒体库</span>
            <span class="subhead">媒体库内容综合管理</span>
        </div>
    </div>

    <div>

        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation"><a href="<?=site_url(array('media','index'))?>">媒体库</a></li>
            <li role="presentation" class="active" ><a href="<?=site_url(array('media','upload'))?>">上传</a></li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active">
                <div class="wp-panel panel-default">
                    <div class="wp-panel-body">

                        <div id="uploader">
                            <p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
                        </div>
                        <br />

                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- 确认工具条 -->
<div id="img-window-bottom-tools" role="alert">
    <div class="pull-right">
        <a class="btn btn-xs btn-primary" href="<?=site_url(array('media','index'))?>" >返回</a>
    </div>
    <i class="clearfix"></i>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<!-- production -->
<script type="text/javascript" src="<?=base_url();?>/public/resource/default/vendor/plupload/js/plupload.full.min.js"></script>
<script type="text/javascript" src="<?=base_url();?>/public/resource/default/vendor/plupload/js/jquery.ui.plupload/jquery.ui.plupload.js"></script>

<script src="<?=base_url();?>/public/resource/default/js/init.js"></script>

<script type="text/javascript">
    // Initialize the widget when the DOM is ready
    $(function() {
        $("#uploader").plupload({
            // General settings
            runtimes : 'html5,flash,silverlight,html4',
            url : '<?=site_url(array("media","upload2plupload"))?>',

            // User can upload no more then 20 files in one go (sets multiple_queues to false)
            max_file_count: 20,

            chunk_size: '1mb',

            // Resize images on clientside if we can
            resize : {
                width : 200,
                height : 200,
                quality : 90,
                crop: true // crop to exact dimensions
            },

            filters : {
                // Maximum file size
                max_file_size : '1000mb',
                // Specify what files to browse for
                mime_types: [
                    {title : "Image files", extensions : "jpg,gif,png"},
                    {title : "Zip files", extensions : "zip"}
                ]
            },

            // Rename files by clicking on their titles
            rename: true,

            // Sort files
            sortable: true,

            // Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
            dragdrop: true,

            // Views to activate
            views: {
                list: true,
                thumbs: true, // Show thumbs
                active: 'thumbs'
            },

            // Flash settings
            flash_swf_url : '<?=base_url();?>/public/resource/default/vendor/plupload/js/Moxie.swf',

            // Silverlight settings
            silverlight_xap_url : '<?=base_url();?>/public/resource/default/vendor/plupload/js/Moxie.xap'
        });


        // Handle the case when form was submitted before uploading has finished
        $('#form').submit(function(e) {
            // Files in queue upload them first
            if ($('#uploader').plupload('getFiles').length > 0) {

                // When all files are uploaded submit form
                $('#uploader').on('complete', function() {
                    $('#form')[0].submit();
                });

                $('#uploader').plupload('start');
            } else {
                alert("You must have at least one file in the queue.");
            }
            return false; // Keep the form from submitting
        });
    });
</script>


</body>
</html>